<template>
  <div class="app-container">
    <!-- 粒子背景 -->
    <ParticleBackground />
    
    <!-- 自定义鼠标光标 -->
    <MouseCursor />
    
    <!-- PWA安装提示 -->
    <PWAInstallPrompt />
    
    <!-- 主内容容器 -->
    <div class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <!-- 装饰性Lottie动画 -->
      <div class="decoration-animations">
        <template v-if="!isLoadingAnimation && loadingAnimation">
          <LottieAnimation
            :animation-data="loadingAnimation"
            :width="80"
            :height="80"
            class="decoration-left"
            :speed="0.8"
          />
          <LottieAnimation
            :animation-data="loadingAnimation"
            :width="60"
            :height="60"
            class="decoration-right"
            :speed="1.2"
            :direction="-1"
          />
        </template>
      </div>
      
      <h1 :class="{ 'title-hover': isHovered }">{{ title }}</h1>
      
      <!-- 主要内容区域的Lottie动画 -->
      <div class="content-animation">
        <LottieAnimation
          v-if="!isLoadingAnimation && loadingAnimation"
          :animation-data="loadingAnimation"
          :width="120"
          :height="120"
          :hover-to-play="true"
          :autoplay="false"
          class="main-animation"
        />
        <div v-else-if="isLoadingAnimation" class="animation-placeholder">
          <!-- 动画加载中的占位符 -->
          <div class="loading-spinner"></div>
        </div>
      </div>
      
      <p>{{ description }}</p>
      
      <div class="footer">
        <p>{{ apologyMessage }}</p>
        <div class="qq-groups">
          <div 
             v-for="group in qqGroups" 
             :key="group.id" 
             class="qq-group"
             :class="{
               'status-hot': group.status === '热',
               'status-full': group.status === '满'
             }"
             @click="handleQQGroupClick(group)"
             @touchstart="handleTouchStart(group)"
             @touchend="handleTouchEnd"
             @touchcancel="handleTouchEnd"
             :title="`点击复制群号: ${group.number}`"
           >
            {{ group.name }}：{{ group.number }}（{{ group.status }}）
          </div>
        </div>
        <p class="contact-info">
          如有紧急事宜，请联系我们：
          <a :href="`mailto:${contactEmail}`" class="email-link" rel="noopener noreferrer">{{ contactEmail }}</a>
        </p>
      </div>
      
      <!-- 复制提示 -->
      <transition name="toast">
        <div v-if="showToast" :class="['toast', `toast-${toastType}`]">
          <span v-if="toastType === 'success'">✓ {{ toastMessage }}</span>
          <span v-else-if="toastType === 'error'" class="toast-error">
            ⚠ {{ toastMessage }}
            <button 
              v-if="toastMessage.includes('重试')"
              @click="retryCopy()"
              :disabled="isRetrying"
              class="retry-button"
            >
              {{ isRetrying ? '重试中...' : '重试' }}
            </button>
          </span>
          <span v-else>{{ toastMessage }}</span>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import ParticleBackground from './components/ParticleBackground.vue'
import MouseCursor from './components/MouseCursor.vue'
import LottieAnimation from './components/LottieAnimation.vue'
import PWAInstallPrompt from './components/PWAInstallPrompt.vue'
// 动态导入Lottie动画数据以实现代码分割
import { useCopy } from './composables/useCopy.js'
import { useTouchFeedback } from './composables/useTouchFeedback.js'
import { getDeviceInfo, getRecommendedAnimationConfig } from './utils/deviceDetection.js'

export default {
  name: 'App',
  components: {
    ParticleBackground,
    MouseCursor,
    LottieAnimation,
    PWAInstallPrompt
  },
  setup() {
    const { 
      showToast, 
      toastMessage, 
      toastType, 
      isRetrying, 
      copyToClipboard, 
      retryCopy 
    } = useCopy()
    
    const {
      isTouch,
      isMobile,
      triggerHapticFeedback,
      addTouchFeedback
    } = useTouchFeedback({
      hapticFeedback: true,
      visualFeedback: true,
      audioFeedback: false
    })
    
    return {
      showToast,
      toastMessage,
      toastType,
      isRetrying,
      copyToClipboard,
      retryCopy,
      isTouch,
      isMobile,
      triggerHapticFeedback,
      addTouchFeedback
    }
  },
  data() {
    const deviceInfo = getDeviceInfo()
    const animationConfig = getRecommendedAnimationConfig()
    
    return {
      title: '网站正在升级维护中',
      description: '为了给您带来更优质的服务和体验，我们正在对网站进行全面的技术升级和内容更新。我们将尽快完成升级，敬请期待！',
      apologyMessage: '给您带来的不便，我们深表歉意。',
      contactEmail: 'net@shanhe.team',
      isHovered: false,
      loadingAnimation: null,
      isLoadingAnimation: true,
      qqGroups: [
        { id: 1, name: 'QQ一群', number: '832838500', status: '满' },
        { id: 2, name: 'QQ二群', number: '570114210', status: '满' },
        { id: 3, name: 'QQ三群', number: '297827229', status: '热' }
      ],
      deviceInfo,
      animationConfig,
      longPressTimer: null,
      longPressGroup: null,
      isLongPressing: false
    }
  },
  async mounted() {
    // 动态加载Lottie动画数据
    await this.loadLottieAnimation()
  },
  methods: {
    async loadLottieAnimation() {
      try {
        // 使用动态导入来实现代码分割
        const { default: animationData } = await import('./assets/loading-animation.json')
        this.loadingAnimation = animationData
      } catch (error) {
        console.warn('Failed to load Lottie animation:', error)
        // 动画加载失败时的降级处理
        this.loadingAnimation = null
      } finally {
        this.isLoadingAnimation = false
      }
    },
    handleMouseEnter() {
      this.isHovered = true
    },
    handleMouseLeave() {
      this.isHovered = false
    },
    handleQQGroupClick(group) {
      // 如果是长按操作，不执行点击复制
      if (this.isLongPressing) {
        this.isLongPressing = false
        return
      }
      
      // 触发触觉反馈
      if (this.isTouch) {
        this.triggerHapticFeedback('medium')
      }
      
      // 执行复制操作
      this.copyToClipboard(group.number, { 
        successMessage: '群号已复制到剪贴板' 
      })
    },
    handleTouchStart(group) {
      if (!this.isMobile) return
      
      this.longPressGroup = group
      this.isLongPressing = false
      
      // 设置长按定时器（500ms）
      this.longPressTimer = setTimeout(() => {
        this.isLongPressing = true
        
        // 触发强烈的触觉反馈表示长按成功
        this.triggerHapticFeedback('heavy')
        
        // 执行复制操作
        this.copyToClipboard(group.number, { 
          successMessage: `${group.name}群号已复制（长按复制）` 
        })
        
        // 清理状态
        this.longPressTimer = null
        this.longPressGroup = null
      }, 500)
    },
    handleTouchEnd() {
      if (this.longPressTimer) {
        clearTimeout(this.longPressTimer)
        this.longPressTimer = null
        this.longPressGroup = null
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* 装饰性动画定位 */
.decoration-animations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.decoration-left {
  position: absolute;
  top: 20%;
  left: 10%;
  opacity: 0.6;
}

.decoration-right {
  position: absolute;
  top: 70%;
  right: 15%;
  opacity: 0.4;
}

/* 主要内容动画 */
.content-animation {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.main-animation {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.main-animation:hover {
  opacity: 1;
}

/* 动画加载占位符样式 */
.animation-placeholder {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.title-hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.qq-groups {
  margin: 25px 0;
}

.contact-info {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.email-link {
  font-size: 1.1em;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-block;
  margin-left: 8px;
}

.email-link:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  z-index: 1000;
  font-weight: 600;
  backdrop-filter: blur(10px);
  max-width: 90vw;
  word-wrap: break-word;
}

.toast-success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  box-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
}

.toast-error {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  box-shadow: 0 8px 25px rgba(229, 62, 62, 0.3);
}

.toast-info {
  background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
  box-shadow: 0 8px 25px rgba(49, 130, 206, 0.3);
}

.toast span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toast-error {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.retry-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.retry-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.retry-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toast-enter-active {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-leave-active {
  transition: all 0.3s ease-in;
}

.toast-enter-from {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-20px) scale(0.8);
}

.toast-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-20px) scale(0.8);
}

@media (max-width: 768px) {
  .decoration-left {
    top: 10%;
    left: 5%;
    transform: scale(0.8);
  }
  
  .decoration-right {
    top: 80%;
    right: 5%;
    transform: scale(0.7);
  }
  
  .main-animation {
    transform: scale(0.8);
  }
  
  .email-link {
    display: block;
    margin: 10px auto 0;
    width: fit-content;
  }
  
  .toast {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: calc(100vw - 40px);
  }
}
</style>